<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 营养健康管理系统</title>
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 自定义CSS -->
    <link rel="stylesheet" href="../css/styles.css">
</head>
<body class="bg-gray-50">
    <!-- 导航栏 -->
    <nav class="bg-green-600 text-white shadow-lg">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center">
                <svg class="h-10 w-10 mr-3" viewBox="0 0 100 100">
                    <circle cx="50" cy="50" r="45" fill="#4CAF50" />
                    <text x="50" y="55" font-size="20" text-anchor="middle" fill="white">营养</text>
                    <path d="M30,70 Q50,90 70,70" stroke="white" stroke-width="3" fill="none" />
                </svg>
                <h1 class="text-xl font-bold">营养健康管理系统</h1>
            </div>
            <div class="hidden md:flex space-x-6">
                <a href="../index.html" class="hover:text-green-200">首页</a>
                <a href="food-analysis.html" class="hover:text-green-200">食品分析</a>
                <a href="health-profile.html" class="hover:text-green-200">健康档案</a>
                <a href="diet-records.html" class="hover:text-green-200">饮食记录</a>
                <a href="nutrition-knowledge.html" class="hover:text-green-200">营养知识</a>
            </div>
            <div class="flex items-center space-x-4 nav-user-section">
                <!-- 这里的内容将由auth.js动态更新 -->
                <a href="login.html" class="hover:text-green-200">登录</a>
                <a href="register.html" class="bg-white text-green-600 px-4 py-2 rounded-lg hover:bg-green-100">注册</a>
            </div>
        </div>
    </nav>

    <!-- 登录表单 -->
    <div class="container mx-auto px-4 py-16">
        <div class="max-w-md mx-auto bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-green-600 text-white py-4 px-6">
                <h2 class="text-2xl font-bold">用户登录</h2>
                <p class="text-green-100">登录您的账号以使用完整功能</p>
            </div>
            <div class="p-6">
                <form id="loginForm" class="space-y-6">
                    <div class="form-group">
                        <label for="username" class="form-label">用户名</label>
                        <input type="text" id="username" name="username" class="form-input" placeholder="请输入用户名" required>
                    </div>
                    <div class="form-group">
                        <label for="password" class="form-label">密码</label>
                        <input type="password" id="password" name="password" class="form-input" placeholder="请输入密码" required>
                    </div>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <input type="checkbox" id="remember" name="remember" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded">
                            <label for="remember" class="ml-2 block text-sm text-gray-700">记住我</label>
                        </div>
                        <a href="#" class="text-sm text-green-600 hover:text-green-800">忘记密码？</a>
                    </div>
                    <div>
                        <button type="submit" class="w-full bg-green-600 text-white py-3 px-4 rounded-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2">
                            登录
                        </button>
                    </div>
                    <div class="text-center">
                        <p class="text-sm text-gray-600">
                            还没有账号？ <a href="register.html" class="text-green-600 hover:text-green-800 font-medium">立即注册</a>
                        </p>
                    </div>
                </form>
                <!-- 登录状态提示 -->
                <div id="loginStatus" class="mt-4 text-center hidden">
                    <p id="loginMessage" class="text-red-500"></p>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-green-800 text-white py-10">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-lg font-semibold mb-4">关于我们</h3>
                    <p class="text-green-200">营养健康管理系统致力于通过先进技术帮助用户了解食品营养成分，提供个性化健康建议，促进健康生活方式。</p>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">快速链接</h3>
                    <ul class="space-y-2 text-green-200">
                        <li><a href="../index.html" class="hover:text-white">首页</a></li>
                        <li><a href="food-analysis.html" class="hover:text-white">食品分析</a></li>
                        <li><a href="health-profile.html" class="hover:text-white">健康档案</a></li>
                        <li><a href="diet-records.html" class="hover:text-white">饮食记录</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">联系我们</h3>
                    <ul class="space-y-2 text-green-200">
                        <li>邮箱：contact@nutrition-health.com</li>
                        <li>电话：400-123-4567</li>
                        <li>地址：北京市海淀区中关村大街1号</li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">关注我们</h3>
                    <div class="flex space-x-4">
                        <a href="#" class="text-green-200 hover:text-white">
                            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z"/>
                            </svg>
                        </a>
                        <a href="#" class="text-green-200 hover:text-white">
                            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723 10.054 10.054 0 01-3.127 1.184 4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
                            </svg>
                        </a>
                        <a href="#" class="text-green-200 hover:text-white">
                            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
            <div class="border-t border-green-700 mt-8 pt-6 text-center text-green-300">
                <p>&copy; 2025 营养健康管理系统 版权所有</p>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script src="../js/api-service.js"></script>
    <script src="../js/auth.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const loginForm = document.getElementById('loginForm');
            const loginStatus = document.getElementById('loginStatus');
            const loginMessage = document.getElementById('loginMessage');

            // 检查是否已登录
            const currentUser = JSON.parse(localStorage.getItem('currentUser'));
            if (currentUser && currentUser.token) {
                window.location.href = '../index.html'; // 已登录则重定向到首页
            }

            loginForm.addEventListener('submit', async function(e) {
                e.preventDefault();
                
                const username = document.getElementById('username').value;
                const password = document.getElementById('password').value;
                const remember = document.getElementById('remember').checked;
                
                try {
                    loginStatus.classList.add('hidden');
                    
                    // 调用登录API
                    const response = await window.apiService.user.login({
                        username: username,
                        password: password
                    });
                    
                    // 登录成功，保存用户信息和令牌
                    const userData = {
                        id: response.user.id,
                        username: response.user.username,
                        fullName: response.user.fullName,
                        email: response.user.email,
                        token: response.token
                    };
                    
                    // 存储用户信息
                    if (remember) {
                        localStorage.setItem('currentUser', JSON.stringify(userData));
                    } else {
                        sessionStorage.setItem('currentUser', JSON.stringify(userData));
                    }
                    
                    // 显示成功消息并重定向
                    showToast('登录成功，正在跳转...', 'success');
                    setTimeout(() => {
                        window.location.href = '../index.html';
                    }, 1500);
                    
                } catch (error) {
                    console.error('登录失败:', error);
                    
                    // 显示错误消息
                    loginStatus.classList.remove('hidden');
                    loginMessage.textContent = '用户名或密码错误，请重试';
                }
            });
            
            // 显示提示消息
            function showToast(message, type = 'info') {
                // 检查是否已存在toast元素
                let toast = document.querySelector('.toast');
                if (!toast) {
                    toast = document.createElement('div');
                    toast.className = `toast toast-${type}`;
                    document.body.appendChild(toast);
                } else {
                    toast.className = `toast toast-${type}`;
                }
                
                toast.textContent = message;
                toast.classList.add('show');
                
                setTimeout(() => {
                    toast.classList.remove('show');
                }, 3000);
            }
        });
    </script>
</body>
</html>